import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import styled, { keyframes } from 'styled-components';
import { motion } from 'framer-motion';

// 悬浮动画
const float = keyframes`
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
`;

// 星空背景动画
const twinkle = keyframes`
  0% { opacity: 0.2; }
  50% { opacity: 1; }
  100% { opacity: 0.2; }
`;

const TarotHomeContainer = styled.div`
  min-height: 100vh;
  background: linear-gradient(135deg, #1a0a2e 0%, #0d0630 100%);
  color: white;
  padding: 20px;
  position: relative;
  overflow: hidden;
`;

const Star = styled.div`
  position: absolute;
  background-color: white;
  border-radius: 50%;
  animation: ${twinkle} ${(props) => props.duration || 3}s infinite ease-in-out;
`;

const MysticalIcon = styled(motion.div)`
  width: 120px;
  height: 120px;
  margin: 40px auto 30px;
  background: radial-gradient(circle, #8a2be2 0%, #4b0082 70%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  animation: ${float} 3s ease-in-out infinite;
  box-shadow: 0 0 30px rgba(138, 43, 226, 0.5);
  cursor: pointer;
`;

const Title = styled.h1`
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 10px;
  background: linear-gradient(to right, #9d4edd, #5a189a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(157, 78, 221, 0.3);
`;

const Subtitle = styled.p`
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 40px;
  color: #c77dff;
`;

const ButtonContainer = styled.div`
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
  flex-wrap: wrap;
`;

const ActionButton = styled(motion.button)`
  padding: 15px 30px;
  font-size: 1.1rem;
  border: none;
  border-radius: 50px;
  background: linear-gradient(45deg, #9d4edd, #5a189a);
  color: white;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(90, 24, 154, 0.3);
  
  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(90, 24, 154, 0.5);
  }
`;

const CarouselContainer = styled.div`
  max-width: 800px;
  margin: 0 auto;
  position: relative;
`;

const CarouselTitle = styled.h2`
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #e0aaff;
`;

const CarouselWrapper = styled.div`
  display: flex;
  overflow-x: hidden;
  scroll-behavior: smooth;
  gap: 20px;
  padding: 20px 0;
`;

const CarouselItem = styled(motion.div)`
  min-width: 300px;
  background: rgba(90, 24, 154, 0.2);
  border-radius: 15px;
  padding: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(157, 78, 221, 0.3);
  cursor: pointer;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(90, 24, 154, 0.4);
  }
`;

const ItemTitle = styled.h3`
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: #e0aaff;
`;

const ItemDescription = styled.p`
  font-size: 1rem;
  color: #c77dff;
`;

const RecommendationCard = styled(motion.div)`
  background: rgba(157, 78, 221, 0.3);
  border-radius: 15px;
  padding: 20px;
  margin: 20px auto;
  max-width: 500px;
  text-align: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(157, 78, 221, 0.5);
`;

const RecommendationTitle = styled.h3`
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #e0aaff;
`;

const RecommendationReason = styled.p`
  font-size: 1rem;
  color: #c77dff;
  margin-bottom: 15px;
`;

const StartButton = styled.button`
  padding: 10px 20px;
  font-size: 1rem;
  border: none;
  border-radius: 50px;
  background: linear-gradient(45deg, #9d4edd, #5a189a);
  color: white;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(90, 24, 154, 0.3);
  
  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(90, 24, 154, 0.5);
  }
`;

const TarotHome = () => {
  const navigate = useNavigate();
  const [stars, setStars] = useState([]);
  const [dailyRecommendation, setDailyRecommendation] = useState(null);

  // 生成随机星星背景
  useEffect(() => {
    const starsArray = [];
    for (let i = 0; i < 50; i++) {
      starsArray.push({
        id: i,
        top: `${Math.random() * 100}%`,
        left: `${Math.random() * 100}%`,
        size: `${Math.random() * 3 + 1}px`,
        duration: Math.random() * 3 + 2
      });
    }
    setStars(starsArray);
  }, []);

  // 获取今日推荐牌阵
  useEffect(() => {
    // 模拟用户ID，实际应用中应该从认证系统获取
    const userId = "user123";
    
    // 这里应该调用API获取今日推荐牌阵
    // 暂时使用模拟数据
    const mockRecommendation = {
      spreadType: "three_cards",
      spreadName: "三张牌阵",
      reason: "今天的能量场与这个牌阵完美契合",
      positions: ["过去", "现在", "未来"]
    };
    
    setDailyRecommendation(mockRecommendation);
  }, []);

  // 推荐牌阵数据
  const recommendedSpreads = [
    {
      id: 1,
      title: "每日指引",
      description: "抽取一张牌，获得今日的能量指引和建议。",
      spreadType: "daily"
    },
    {
      id: 2,
      title: "三张牌阵",
      description: "探索过去、现在和未来，了解事情的发展脉络。",
      spreadType: "three_cards"
    },
    {
      id: 3,
      title: "凯尔特十字",
      description: "最全面的牌阵，深入分析复杂情况的所有方面。",
      spreadType: "celtic_cross"
    },
    {
      id: 4,
      title: "关系洞察",
      description: "专门用于探索人际关系和情感连接的牌阵。",
      spreadType: "relationship"
    }
  ];

  // 热门问题数据
  const popularQuestions = [
    {
      id: 1,
      category: "爱情",
      question: "我和TA的未来发展会如何？"
    },
    {
      id: 2,
      category: "事业",
      question: "我下一步的职业方向是什么？"
    },
    {
      id: 3,
      category: "运势",
      question: "我本周的整体运势怎么样？"
    }
  ];

  const handleStartReading = () => {
    navigate('/tarot/question');
  };

  const handleViewRecords = () => {
    // 这里应该导航到用户的记录页面
    console.log("查看记录");
  };

  const handleStartRecommendedReading = () => {
    if (dailyRecommendation) {
      navigate(`/tarot/spread?recommended=${dailyRecommendation.spreadType}`);
    }
  };

  return (
    <TarotHomeContainer>
      {/* 星空背景 */}
      {stars.map(star => (
        <Star 
          key={star.id}
          style={{
            top: star.top,
            left: star.left,
            width: star.size,
            height: star.size
          }}
          duration={star.duration}
        />
      ))}
      
      <MysticalIcon
        whileHover={{ scale: 1.1 }}
        whileTap={{ scale: 0.9 }}
        onClick={handleStartReading}
      >
        ♣
      </MysticalIcon>
      
      <Title>塔罗牌占卜</Title>
      <Subtitle>探索命运的奥秘，寻找内心的指引</Subtitle>
      
      {/* 今日推荐牌阵 */}
      {dailyRecommendation && (
        <RecommendationCard
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
        >
          <RecommendationTitle>✨ 今日推荐牌阵：{dailyRecommendation.spreadName}</RecommendationTitle>
          <RecommendationReason>&quot;{dailyRecommendation.reason}&quot;</RecommendationReason>
          <StartButton onClick={handleStartRecommendedReading}>
            立即开始
          </StartButton>
        </RecommendationCard>
      )}
      
      <ButtonContainer>
        <ActionButton
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
          onClick={handleStartReading}
        >
          开始测算
        </ActionButton>
        <ActionButton
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
          onClick={handleViewRecords}
        >
          我的记录
        </ActionButton>
      </ButtonContainer>
      
      <CarouselContainer>
        <CarouselTitle>推荐牌阵</CarouselTitle>
        <CarouselWrapper>
          {recommendedSpreads.map((spread) => (
            <CarouselItem
              key={spread.id}
              whileHover={{ y: -10 }}
              onClick={() => navigate('/tarot/spread')}
            >
              <ItemTitle>{spread.title}</ItemTitle>
              <ItemDescription>{spread.description}</ItemDescription>
            </CarouselItem>
          ))}
        </CarouselWrapper>
      </CarouselContainer>
      
      <CarouselContainer style={{ marginTop: '40px' }}>
        <CarouselTitle>热门问题</CarouselTitle>
        <CarouselWrapper>
          {popularQuestions.map((item) => (
            <CarouselItem
              key={item.id}
              whileHover={{ y: -10 }}
              onClick={() => navigate('/tarot/question')}
            >
              <ItemTitle>{item.category}</ItemTitle>
              <ItemDescription>{item.question}</ItemDescription>
            </CarouselItem>
          ))}
        </CarouselWrapper>
      </CarouselContainer>
    </TarotHomeContainer>
  );
};

export default TarotHome;